# CSS的基本概念
# 全称：Cascading Style Sheets，即层叠样式表。
# 功能：用于给HTML元素添加样式，设置HTML页面中文字大小、颜色、对齐方式及元素的宽高、位置等样式。
# 目的：实现内容与表现的分离，提高代码的可重用性和可维护性。
# CSS：
# 使用选择器和属性来选择和设置页面元素的样式。
# 样式规则由选择器和声明块组成，选择器选择要应用样式的HTML元素，声明块由一对花括号 {} 包围，内部包含一个或多个声明，声明由两部分组成：CSS属性和值，它们用冒号分隔，并且每个声明都以分号 ; 结尾（最后一个声明后的分号是可选的，但推荐总是加上以保持代码的一致性）。
# 语法相对灵活，可以通过类、ID、标签、属性等多种选择器来选择要样式化的元素。
# <img style="height:100px;width:150px" src="//32275863.s21i.faiusr.com/2/ABUIABACGAAg0eCPsAYoltGQqwYwgB448BA.jpg.webp"/>
# <span style='color:green;'>康易汇</span>
# CSS应用方式
# 1.在标签上应用(内联样式，也叫行内样式)(指的是使用style属性直接在HTML标签内插入CSS代码)
    # <h1 style="text-align:center;">居中对齐的标题</h1>
# 2.在head标签中使用style标签书写CSS代码，实现对当前网页样式的复用(内部样式表)
    # <head>
    # <style>
    # .c1{color:red;}# 指定了所有具有类名 c1 的HTML元素应该具有的样式，之后对需要应用该样式的标签的开始标签内指定相同的类名即可
    # </style>
    # </head>
# 3.将css代码写到.css文件中(外部样式表)(在HTML文档中通过<link>标签引入外部的CSS文件,定义资源引用地址)(rel属性指定链接类型)
    # <head>
    # <link rel="stylesheet" href="/static/commons.css"># 类似第二种，只是将样式写在文件中，后续导入使用
    # </head>
# CSS选择器(CSS选择器是用于选择要应用样式的HTML元素的重要工具)
# 1.ID选择器(ID是唯一的，针对一个标签)
    # #c1{ }
    # <div id='c1'></div>
# 2.类选择器(应用最多)(类选择器选择具有相同特定类名的元素，为具有相同类名的元素应用相同的样式规则，一个标签使用多个类选择器，class属性值写多个类名用空格隔开即可)
    # .c1{ }
    # <div class='c1'></div>
# 3.标签选择器(元素选择器)(通过HTML标签名来为所有具有相同标签的元素应用相同的样式规则)
    # div{ }
    # <div></div>
# 4.属性选择器(属性选择器根据元素的属性值来选择元素)(可以通过标签或类名进行初筛再用属性选择器，这里权重会叠加)
    # .c1[xx="456"]{ }
    # <div class='c1' xx="123"></div>
    # <div class='c1' xx="456"></div>
    # <div class='c1' xx="999"></div>
# 5.后代选择器（属于复合选择器）(类名和标签可以一起用于筛选，父选择器和子选择器中间用空格隔开，会选择属于父元素后代的所有子选择器选择的元素，也可以用子代选择器(以大于号>分隔）选择直接属于父元素的元素（即直接子元素）)
    # .yy li{}或
    # .yy > a { }
    # <div class='yy'>
        # <a>百度</a>
        # <div>
            # <a>谷歌</a>#这样就不会选择这个
        # </div>
    # </div>
# 6.通配符选择器(查找页面所有标签，设置相同样式)
    # *{ }
# 7.并集选择器(选中多组标签设置相同的样式，选择器中间用逗号,隔开，推荐在逗号后面加空格或者换行)
# 8.交集选择器(选中同时满足多个条件的元素，选择器之间连写，没有任何符号，如果交集选择器中有标签选择器，标签选择器必须书写在最前面)
    # div.highlight（选择同时是div且拥有highlight类名的元素）
# html元素可以应用多个选择器的样式规则，由于CSS的层叠和继承特性，重复的样式规则会按照CSS的层叠（cascade）和优先级（specificity）规则来解析和应用
# 使用 !important 标记的样式会将优先级提高到最高，会覆盖没有使用 !important 的样式，!important 加在分号;前面
# 伪类选择器(是CSS中用于选择元素特定状态或位置的特殊选择器，通过以冒号:开头的关键字实现。它们允许您根据元素的状态（如用户交互）或结构位置（如第几个子元素）应用样式，而无需修改HTML结构。)
# 选择器:hover 鼠标悬停状态
# 如超链接有四种状态(如果要给超链接设置以下四个状态，需要按LVHA顺序书写)：
# :link 访问前(超链接专用)
# :visited 访问后(超链接专用)
# :hover 鼠标悬停
# :active 点击时(激活)
# 结构伪类选择器：根据元素的结构关系查找元素。
    # E:first-child 匹配元素是其父元素的第一个子元素，且类型符合E选择器
    # E:last-child 匹配元素是其父元素的最后一个子元素，且类型符合E选择器
    # E:nth-child(N) (此处参数N可以是一个数字，一个关键字，或者一个公式)如果是数字，匹配元素是其父元素的第 N 个子元素，且类型符合E选择器(第一个元素N值为1)
    # E:nth-child(关键字) odd 选择奇数位置的子元素，even 选择偶数位置的子元素。
    # E:nth-child(公式) 使用公式可以根据元素的结构关系查找多个元素（如偶数位置元素2n，奇数位置元素2n+1,2n-1，找到5的倍数位置的元素5n，找到第5个及以后的元素n+5，找到第5个及以前的元素-n+5）(n 从 0 开始递增，n 的取值范围是 非负整数（n=0, 1, 2, 3...），但实际生效的 n 需满足 计算结果 ≥ 1（因为元素位置从 1 开始计数）)
# 伪元素选择器：在不改变 HTML 结构的情况下，创建虚拟元素(伪元素)，可以用来摆放装饰性的内容。
    # E::before 在E选择的元素里面最前面添加一个伪元素，必须设置content:""属性
    # E::after 在E选择的元素里面最后面添加一个伪元素，必须设置content:""属性
    # 伪元素默认是行内显示模式
    # 权重和标签选择器相同，注意组合使用选择器时，权重会叠加
# CSS三大特性：层叠性，继承性，优先级
# 层叠性：相同的属性会覆盖，选择器优先级相同则后面的CSS属性覆盖前面的CSS属性，不同的属性会叠加，不同的CSS都生效。
# 继承性：子级默认继承父级的字体和部分文本属性(自带默认样式的标签，可能会覆盖继承效果)。
    # 浏览器会为 HTML 文档设置一套基础样式，例如：
    # 根元素 <html> 默认字体大小通常是 16px（可通过 font-size 调整）。
    # <body> 继承 <html> 的字体属性，并可能设置默认外边距（如 margin: 8px）。
    # 块级元素（如 <div>、<p>）默认继承父级（通常是 <body>）的字体属性。
# 优先级：如果多个选择器定义了同一个元素的同一个样式属性，优先级最高的选择器定义的属性值会生效。
    # 通配符选择器 < 标签，伪元素选择器 < 类，伪类，属性选择器 < id选择器 < 行内样式 < !important
# 优先级-叠加计算规则：如果是复合选择器，则需要权重叠加计算。
    # 可以根据上面的优先级，从右向左，比较选择器个数，同一级个数多的则优先级高，相同则往左继续比较
    # !important权重最高
    # 继承权重最低
# Emmet写法：代码的简写方式，输入缩写VS Code会自动生成对应的代码。
    # HTML：
    # 标签名.类名  （类选择器）
    # 标签名#id名  （id选择器）
    # div+p  （同级标签）
    # div>p  （父子级标签）
    # spam*3  （多个相同标签）
    # div{内容}  （有内容的标签）
    # CSS：
    # 大多数简写方式为属性单词的首字母
# 盒子模型组成：
#     内容区域-width&height
#     内边距-padding
#     边框线-border
#     外边距-margin
#     盒子本身：内容区 + 内边距 + 边框
#     盒子的占位空间：盒子本身 + 外边距
# 属性box-sizing：元素宽度和高度的计算方式
# 属性值：content-box（默认值）标准盒子模型，width/height 仅包含内容区域。
#        border-box（推荐值）怪异盒子模型(内减模式)，width/height 包含内容区 + 内边距 + 边框。(避免布局计算时的意外溢出)